<template>
    <div>
    <a-modal v-model="visible" title="修改密码" okText="确认修改" cancelText="取消" :confirm-loading="confirmLoading"
                 @ok="handleOk" @cancel="$store.dispatch('openStateSet',false)" width="500px">
        <a-form :form="form" layout="horizontal" ref="filterForm">
            <a-form-item label="当前密码" colon>
                <a-input-password v-decorator="['oldPassword',{rules:[
                          {required: true,message: '请输入旧密码'}
                        ]}]" placeholder="请输入旧密码"></a-input-password>
            </a-form-item>
            <a-form-item label="新的密码" colon>
                <a-input-password :maxLength="11" v-decorator="['newPassword',{rules:[{required: true,message: '请输入新密码'},{validator: handleConfirmPwd}]}]" placeholder="请输入新密码"></a-input-password>
            </a-form-item>
            <a-form-item label="确认密码" colon>
                <a-input-password :maxLength="11" v-decorator="['confirmNewPwd',{rules:[
                    {required: true,message: '请输入确认密码'},
                          {validator: handleConfirmPwd}]}]" placeholder="请输入新密码"></a-input-password>
            </a-form-item>
        </a-form>
    </a-modal>
    </div>
</template>

<script>
import md5 from 'md5'
export default {
    name: 'editPwd',
    data () {
        return {
            confirmLoading:false,
            visible:false
        }
    },
    computed: {
        openStatus(){
            return this.$store.getters.openStatus
        }
    },
    watch: {
        openStatus (val) {
            this.visible = val;
            this.handleCancel();
        },
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, {name: 'filter_form'});
    },
    methods: {
        handleConfirmPwd(rule,value, callback){
            /* var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (value && !re.test(value)) {
                callback('请输入6-11位密码，且包含数字和字母！');
            } */
            if (value) {
                 //空格
                var pwdblank = /^\S*$/;
                //非法字符
                var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
                var regUpper = /[A-Z]/;
                var regLower = /[a-z]/;
                var regStr = /[0-9]/;
                var complex = 0;
                if (regLower.test(value)) {
                    ++complex;
                }
                if (regUpper.test(value)) {
                    ++complex;
                }
                if (regStr.test(value)) {
                    ++complex;
                }
                if(!pwdblank.test(value)){
                    callback('密码不能有空格！');
                }else if(pattern.test(value)){
                    callback('密码不能有非法字符！');
                }else if (complex < 3 || value.length < 8) {
                    callback('密码包含字母大小写及数字。且长度8位以上！');
                }
                const {form:{getFieldsValue}} = this;
                let values = getFieldsValue();
                if(values.confirmNewPwd && values.newPassword){
                    if(values.confirmNewPwd !== values.newPassword){
                        callback('新密码和确认密码不一致！');
                    }
                }
            }
            callback()
        },
        handleOk() {
            const that = this;
            const {form: {validateFields},} = this;
            validateFields(async(errors, values) => {
                if (errors) return
                if (values.confirmNewPwd !== values.newPassword) return this.$message.error('新密码和确认密码不一致！');
                this.confirmLoading = true;
                let params = {
                    oldPassword:md5(values.oldPassword),
                    newPassword: md5(values.newPassword),
                    id:this.$store.getters.userInfo.id
                }
                this.$store.dispatch("sysEditOperatePwdUser", params).then((res) => {
                    that.confirmLoading = false;
                    if(res.code === '1'){
                        that.$message.success('修改成功');
                    }
                })
            });
        },
        handleCancel() {
            const {form: {resetFields},} = this;
            resetFields();
        }
    }
}
</script>
